<template>
  <section class="vpt-base-tpl-1008"
           :style="baseStyle">
    <section class="vpt-base-content">
      <div class="vpt-content-top">
        <div class="vpt-base-title"
             :style="baseTitleStyle">
          <label>{{ listData.total.label }}</label>
          <div class="value">
            {{ addThousandsSeparator(traceData[listData.total.value])
            }}{{ listData.total.unit }}
          </div>
        </div>
        <div class="vpt-base-details"
             :style="detailsStyle">
          <div class="vpt-base-details-item"
               v-for="item in listData.list"
               :key="item">
            <label>{{ item.label }}</label>

            <div class="value">
              {{ addThousandsSeparator(traceData[item.value]) }}{{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div class=""
           v-if="listData && listData.data && listData.data.length > 0">
        <div class="vpt-content-box"
             :style="boxStyle"
             v-if="listData.data.length == 1">
          <div class="vpt-content-box-item"
               v-for="item in listData.data"
               :key="item">
            <label>{{ item.label }}</label>
            <div class="value">
              {{ addThousandsSeparator(traceData[item.value]) }}{{ item.unit }}
            </div>
          </div>
        </div>
        <div class="vpt-content-box"
             :style="boxStyle"
             v-else>
          <div class="vpt-content-box-items"
               v-for="item in listData.data"
               :key="item">
            <label>{{ item.label }}</label>
            <div class="value">
              {{ addThousandsSeparator(traceData[item.value]) }}{{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div class="vpt-content-bottom"
           v-if="listData && listData.rate && listData.rate.length > 0">
        <div class="vpt-content-bottom-item"
             v-for="item in listData.rate"
             :key="item">
          <label>{{ item.label }}</label>
          <div class="value">
            {{ addThousandsSeparator(traceData[item.value]) }}{{ item.unit }}
          </div>
        </div>
      </div>
      <!-- <div class="vpt-label-item" v-for="(item, i) in list">
        <label class="vpt-label">
          {{ item.label }}
        </label>
        <div class="vpt-val">
          {{ item.value }}
          <em class="vpt-unit">{{ item.unit }}</em>
        </div>
      </div> -->
    </section>
  </section>
</template>

<script setup>
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  listData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  traceData: { type: Object, default: () => { } },
  baseStyle: {
    type: Object,
    default: () => {
      return {
        marginTop: 0,
        background: "#1470cc1a",
        border: "0.01rem solid #E6EBF5",
      };
    },
  },
  baseTitleStyle: {
    type: Object,
    default: () => {
      return {
        padding: "0.16rem",
      };
    },
  },
  boxStyle: {
    type: Object,
    default: () => {
      return {
        margin: "0 0.12rem",
      };
    },
  },
  detailsStyle: {
    type: Object,
    default: () => {
      return {
        padding: "0.2rem",
      };
    },
  },
});
</script>
<style lang="less" scoped>
.vpt-base-tpl-1008 {
  // width: 5.4rem;
  // height: 2.06rem;
  background: #1470cc1a;
  border: 0.01rem solid #e6ebf5;

  .vpt-base-content {
    width: 100%;
    .vpt-content-top {
      width: 100%;
      display: flex;
      align-items: center;
      .vpt-base-title {
        width: 0.8rem;
        padding: 0.16rem;
        color: #fff;
        label {
          font-size: 0.18rem;
          line-height: 0.24rem;
        }
        .value {
          font-size: 0.24rem;
          line-height: 0.32rem;
        }
      }
      .vpt-base-details {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.2rem;
        .vpt-base-details-item {
          label {
            font-size: 0.14rem;
            color: #86909c;
            line-height: 0.24rem;
          }
          .value {
            font-size: 0.18rem;
            color: #ffffff;
            line-height: 0.24rem;
          }
        }
      }
    }
    .vpt-content-box {
      margin: 0 0.12rem;
      margin-bottom: 0.12rem;
      padding: 0.16rem;
      background: #1470cc1a;
      border: 0.01rem solid #e6ebf5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .vpt-content-box-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 0.2rem;
      }
      .vpt-content-box-items {
        line-height: 0.2rem;
      }
      label {
        font-size: 0.14rem;
        color: #ffffffb3;
      }
      .value {
        font-size: 0.18rem;
        color: #ffffff;
        margin-top: 0.04rem;
      }
    }
    .vpt-content-bottom {
      margin: 0.12rem;
      display: flex;
      justify-content: space-between;
      .vpt-content-bottom-item {
        display: flex;
        align-items: center;
        label {
          font-size: 0.14rem;
          line-height: 0.2rem;
          color: #ffffffb3;
        }
        .value {
          font-size: 0.14rem;
          color: #ffffff;
          margin-left: 0.12rem;
          margin-top: 0.01rem;
          line-height: 0.2rem;
        }
      }
    }
    // .vpt-label-item {
    //   width: 50%;
    //   margin-right: 0.2rem;
    //   // display: flex;
    //   .vpt-label {
    //     color: #ffffffb3;
    //     font-size: 0.14rem;
    //   }
    //   .vpt-val {
    //     font-size: 0.18rem;
    //     color: #fff;
    //     .vpt-unit {
    //       color: #ffffffb3;
    //       font-style: normal;
    //       font-size: 0.18rem;
    //     }
    //   }
    // }
  }
}
</style>